<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>商户详情</span>
          <el-button type="primary" @click="goBack">返回</el-button>
        </div>
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="商户名称">{{ merchantDetail.merchantName }}</el-descriptions-item>
        <el-descriptions-item label="门店地址">{{ merchantDetail.address }}</el-descriptions-item>
        <el-descriptions-item label="负责人">{{ merchantDetail.director }}</el-descriptions-item>
        <el-descriptions-item label="身份证号">{{ merchantDetail.idCard }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ merchantDetail.mobile }}</el-descriptions-item>
        <el-descriptions-item label="注册时间">{{ parseTime(merchantDetail.regTime, '{y}-{m}-{d}') }}</el-descriptions-item>
        <el-descriptions-item label="联系人姓名">{{ merchantDetail.contactName }}</el-descriptions-item>
        <el-descriptions-item label="联系人电话">{{ merchantDetail.contactPhone }}</el-descriptions-item>
        <el-descriptions-item label="营业执照号">{{ merchantDetail.businessLicenseId }}</el-descriptions-item>
        <el-descriptions-item label="经营区域">{{ merchantDetail.operatingArea }}</el-descriptions-item>
        <el-descriptions-item label="销量">{{ merchantDetail.sales }}</el-descriptions-item>
        <el-descriptions-item label="星级">{{ merchantDetail.starAmount || '暂无评分' }}</el-descriptions-item>
        <el-descriptions-item label="审核状态">
          <el-tag type="success" v-if="merchantDetail.auditStatusId === 1">已审核</el-tag>
          <el-tag type="danger" v-else-if="merchantDetail.auditStatusId === 2">已拒绝</el-tag>
          <el-tag type="warning" v-else>待审核</el-tag>
        </el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">图片资料</el-divider>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="image-item">
            <div class="image-title">门店缩略图</div>
            <el-image 
              v-if="merchantDetail.photo" 
              :src="merchantDetail.photo" 
              :preview-src-list="[merchantDetail.photo]"
              fit="cover"
              class="merchant-image"
            />
            <div v-else class="no-image">暂无图片</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="image-item">
            <div class="image-title">营业执照</div>
            <el-image 
              v-if="merchantDetail.businessLicenseImg" 
              :src="merchantDetail.businessLicenseImg" 
              :preview-src-list="[merchantDetail.businessLicenseImg]"
              fit="cover"
              class="merchant-image"
            />
            <div v-else class="no-image">暂无图片</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="image-item">
            <div class="image-title">身份证正面</div>
            <el-image 
              v-if="merchantDetail.front" 
              :src="merchantDetail.front" 
              :preview-src-list="[merchantDetail.front]"
              fit="cover"
              class="merchant-image"
            />
            <div v-else class="no-image">暂无图片</div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="mt20">
        <el-col :span="8">
          <div class="image-item">
            <div class="image-title">身份证反面</div>
            <el-image 
              v-if="merchantDetail.opposite" 
              :src="merchantDetail.opposite" 
              :preview-src-list="[merchantDetail.opposite]"
              fit="cover"
              class="merchant-image"
            />
            <div v-else class="no-image">暂无图片</div>
          </div>
        </el-col>
      </el-row>

      <div class="action-bar" v-if="merchantDetail.auditStatusId === 0">
        <el-button type="primary" @click="handleAudit(merchantDetail)">审核通过</el-button>
        <el-button type="danger" @click="handleReject(merchantDetail)">拒绝审核</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup name="MerchantDetail">
import { getMerchant, updateMerchant, auditMerchant } from "@/api/merchant/merchant";
import { useRoute, useRouter } from 'vue-router';

const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const merchantDetail = ref({});
const loading = ref(true);

/** 获取商户详情 */
function getDetail(id) {
  loading.value = true;
  getMerchant(id).then(response => {
    merchantDetail.value = response.data;
    loading.value = false;
  });
}

/** 返回上一页 */
function goBack() {
  router.go(-1);
}

/** 审核通过 */
function handleAudit(row) {
  proxy.$modal.confirm('确认审核通过商户 "' + row.merchantName + '" 吗？').then(function() {
    auditMerchant(row.id, 1).then(response => {
      proxy.$modal.msgSuccess("审核成功");
      getDetail(row.id);
    });
  }).catch(() => {});
}

/** 拒绝审核 */
function handleReject(row) {
  proxy.$modal.prompt('请输入拒绝原因').then(({ value }) => {
    if (value) {
      auditMerchant(row.id, 2, value).then(response => {
        proxy.$modal.msgSuccess("已拒绝审核");
        getDetail(row.id);
      });
    }
  }).catch(() => {});
}

onMounted(() => {
  const id = route.query.id;
  if (id) {
    getDetail(id);
  }
});
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.image-item {
  margin-bottom: 20px;
}

.image-title {
  margin-bottom: 10px;
  font-weight: bold;
}

.merchant-image {
  width: 100%;
  height: 200px;
  border-radius: 4px;
}

.no-image {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  color: #909399;
  border-radius: 4px;
}

.action-bar {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.mt20 {
  margin-top: 20px;
}
</style> 